<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>八八商城</title>
     <link rel="icon" href="/static/images/index/logo2.png">
    <link rel="stylesheet" href="/static/css/index/reset.css">
    <link rel="stylesheet" href="/static/css/iconfont/iconfont.css">
    <link rel="stylesheet" href="/static/css/dialog.css">
    <link rel="stylesheet" href="/static/css/index/eight-nav.css">
    <link rel="stylesheet" href="/static/css/index/eight-carousel.css">
    <link rel="stylesheet" href="/static/css/index/eight-main.css">
    <link rel="stylesheet" href="/static/css/index/eight-footer.css">

</head>


<body>
<!--开头导航栏+大图片开始-->
<div class="nav">
    <div class="wrapper">
        <!--    导航栏开始   -->
        <div class="nav-big-logo">
            <img src="/static/images/index/logo2.png" alt="" class="eightLogo">
        </div>
        <ul>
            <li class="nav-item">
                <a href="/eight/view/commodities?pageName=phone" target="_blank" class="phone-item">手机</a>
            </li>
            <li class="nav-item">
                <a href="/eight/view/commodities?pageName=hourse" target="_blank" class="hourse-item">家具</a>
            </li>
            <li class="nav-item"><a href="/eight/view/commodities?pageName=book" target="_blank" class="book-item">书籍</a></li>
            <li class="nav-item"><a href="/eight/view/commodities?pageName=audio" target="_blank" class="audio-item">音响</a></li>
            <li class="nav-item"><a href="/eight/view/commodities?pageName=parts" target="_blank" class="parts-item">配件</a></li>
            <li class="nav-item no-achieve"><a href="javascript:;">生活</a></li>
            <li class="nav-item no-achieve"><a href="javascript:;">服务</a></li>
            <li class="nav-item no-achieve"><a href="javascript:;">社区</a></li>
            <li class="nav-item no-achieve"><a href="javascript:;">App下载</a></li>
        </ul>
        <div class="header-user-cart">
            <span class="iconfont">&#xe607;</span>
            <em>0</em>
        </div>
        <div class="header-user-head">
            <span class="iconfont login-head">&#xe65d;</span>
            <span class="head-portrait"></span>
            <ul class="user-operator">
                <li>
                    <a href="/static/userLoginAndReg/loginUser.html" target="_blank"
                       id="user-operator1" class="user-login">用户登录</a>
                </li>
                <li>
                    <a href="/static/userLoginAndReg/registerUser.html"
                       target="_blank" id="user-operator2" class="user-regist">用户注册</a>
                </li>
                <li>
                    <a href="UserOrder" target="_blank"
                       id="user-operator3" class="user-order">我的订单</a>
                </li>
            </ul>
        </div>
        <form action="" class="nav-search-form">
            <label>
                <input type="search" placeholder="八八 Pro Max 1T">
            </label>
        </form>


    </div>
</div>
<!--    导航栏结束   -->
<!--轮播图开始-->
<div class="carousel">
    <div class="cartun">
        <a href="/eight/view/commodities?pageName=hourse">
            <img src="/static/images/index/carousel1.jpg" alt="" id="loop-img1">
        </a>

        <ul  class="circle">
            <li class="cir"></li>
            <li class="cir"></li>
            <li class="cir"></li>
            <li class="cir"></li>
        </ul>
    </div>

</div>
<!--轮播图结束-->
<!--开头导航栏+大图片结束-->

<!--主内容开始-->
<div class="main">
    <div class="wrapper">
        <!--小米秒杀开始-->
        <div class="plain-box">
            <h2 class="title">商城秒杀</h2>
            <div class="plain">
                <div class="plain-left">
                    <p class="round"></p>
                    <img src="" alt="">
                    <p class="desc">距离结束还有</p>
                    <div class="time">
                        <span class="hourse"></span><i>:</i><span class="minute"></span><i>:</i><span class="second"></span>
                    </div>
                </div>
                <div class="plain-right">
                    <!--JavaScript动态显示-->
                </div>
            </div>
            <!--小米秒杀结束-->

        </div>
        <!--手机开始-->
        <div class="home-brick-box phone-brick-box">
            <h2 class="title">手机</h2>
            <div class="more">
                <a href="/eight/view/commodities?pageName=phone" target="_blank">查看更多
                    <span class="arrow">
                    <span class="iconfont">&#xe621;</span>
                </span></a>
            </div>
            <div class="phone">
                <div class="phone-left">
                    <a href="javascript:;" class="no-achieve"><img src="" alt=""></a>
                </div>
                <div class="phone-right phone-box">
                    <!--JavaScript动态显示-->
                </div>
            </div>
        </div>
        <!--手机结束-->
        <!--家电开始-->
        <div class="home-brick-box">
            <div class="title">家电</div>
            <div class="more hourse-more">
                <ul>
                    <li class="hot-active">热门</li>
                    <li class="hourse-smart">智能</li>
                    <li class="hourse-ordinary">普通</li>
                </ul>
            </div>
            <div class="home-brick">
                <div class="home-brick-left hourse-left">

                </div>
                <div class="home-brick-right hourse-box">
                    <!--JavaScript动态显示-->
                </div>
            </div>
        </div>
        <!--家电结束-->
        <!--智能开始-->
        <div class="home-brick-box">
            <div class="title">书籍</div>
            <div class="more book-more">
                <ul>
                    <li class="hot-active">热门</li>
                    <li class="book-lite">文学</li>
                    <li class="book-scien">科幻</li>
                    <li class="book-love">言情</li>
                    <li class="book-terri">恐怖</li>
                </ul>
            </div>
            <div class="home-brick">
                <div class="home-brick-left book-left">

                </div>
                <div class="home-brick-right book-box">
                    <!--JavaScript动态显示-->
                </div>
            </div>
        </div>
        <!--智能结束-->

        <!--音箱开始-->
        <div class="home-brick-box ">
            <div class="title">音箱</div>
            <div class="more audio-more">
                <ul>
                    <li class="hot-active">热门</li>
                    <li class="audio-smart">智能音箱</li>
                    <li class="audio-ordinary">普通音箱</li>
                </ul>
            </div>
            <div class="home-brick">
                <div class="home-brick-left audio-left">
                </div>
                <div class="home-brick-right audio-box">
                    <!--JavaScript动态显示-->
                </div>
            </div>
        </div>
        <!--音箱结束-->

        <!--配件开始-->
        <div class="home-brick-box">
            <div class="title">配件</div>
            <div class="more parts-more">
                <ul>
                    <li class="hot-active">热门</li>
                    <li class="parts-smart">电子配件</li>
                    <li class="parts-life">生活配件</li>
                </ul>
            </div>
            <div class="home-brick">
                <div class="home-brick-left parts-left" >
                    <!--JavaScript动态显示-->

                </div>
                <div class="home-brick-right parts-box">
                    <!--JavaScript动态显示-->
                </div>
            </div>
        </div>
        <!--配件结束-->

        <!--社区热帖开始-->
        <div class="community-box">
            <!--标题-->
            <div class="community-title">
                <h3>社区</h3>
            </div>

            <!--热帖-->
            <div class="community">

            </div>
        </div>
        <!--社区热帖结束-->

        <!--视频开始-->
        <div class="video-box">
            <div class="title">视频</div>
            <div class="more">
                <a href="javascript:;">查看全部
                    <span class="arrow">
                    <span class="iconfont">&#xe621;</span>
                </span></a>
            </div>
            <div class="video">
                <ul>
                    <li class="no-achieve">
                        <a href="javascript:;">
                            <div class="video-img">
                                <img src="/static/images/index/video01.jpg" alt="">
                                <div class="btn">
                                    <div></div>
                                </div>
                            </div>
                            <p class="name">八八商城创始人</p>
                        </a>
                    </li>
                    <li class="no-achieve">
                        <a href="javascript:;">
                            <div class="video-img">
                                <img src="/static/images/index/video02.jpg" alt="">
                                <div class="btn">
                                    <div></div>
                                </div>
                            </div>
                            <p class="name">八八商城发展历程</p>
                            <p class="desc">八八商城发展历程</p>
                        </a>
                    </li>
                    <li class="no-achieve">
                        <a href="javascript:;">
                            <div class="video-img">
                                <img src="/static/images/index/video03.jpg" alt="">
                                <div class="btn">
                                    <div></div>
                                </div>
                            </div>
                            <p class="name">八八商城,与你相见</p>
                        </a>
                    </li>
                    <li class="no-achieve">
                        <a href="javascript:;">
                            <div class="video-img">
                                <img src="/static/images/index/video04.jpg" alt="">
                                <div class="btn">
                                    <div></div>
                                </div>
                            </div>
                            <p class="name">八八商城影视介绍</p>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <!--视频结束-->
    </div>

</div>
<!--主内容结束-->
<!--页脚开始-->
<div class="footer">
    <div class="footer-site">
        <div class="wrapper">
            <div class="footer-service">
                <ul>
                    <li><a href="javascript:;" class="no-achieve">
                        <span class="iconfont">&#xe629;</span>
                        预约服务维修
                    </a></li>
                    <li><a href="javascript:;" class="no-achieve">
                        <span class="iconfont">&#xe60e;</span>
                        7天无理由退货
                    </a></li>
                    <li><a href="javascript:;" class="no-achieve">
                        <span class="iconfont">&#xe606;</span>
                        15天免费换货
                    </a></li>
                    <li><a href="javascript:;" class="no-achieve">
                        <span class="iconfont">&#xe624;</span>
                        满99包邮
                    </a></li>
                    <li><a href="javascript:;" class="no-achieve">
                        <span class="iconfont">&#xe617;</span>
                        520余家售后网点
                    </a></li>
                </ul>
            </div>
            <div class="footer-links">
                <dl>
                    <dt>帮助中心</dt>
                    <dd><a href="javascript:;" class="no-achieve">账户管理</a></dd>
                    <dd><a href="javascript:;" class="no-achieve">购物指南</a></dd>
                    <dd><a href="javascript:;" class="no-achieve">订单操作</a></dd>
                </dl>
                <dl>
                    <dt>服务支持</dt>
                    <dd><a href="javascript:;" class="no-achieve">售后政策</a></dd>
                    <dd><a href="javascript:;" class="no-achieve">自助服务</a></dd>
                    <dd><a href="javascript:;" class="no-achieve">相关下载</a></dd>
                </dl>
                <dl>
                    <dt>关注我们</dt>
                    <dd><a href="javascript:;" class="no-achieve">新浪微博</a></dd>
                    <dd><a href="javascript:;" class="no-achieve">官方微信</a></dd>
                    <dd><a href="javascript:;" class="no-achieve">联系我们</a></dd>
                    <dd><a href="javascript:;" class="no-achieve">公益基金会</a></dd>
                </dl>
                <dl>
                    <dt>特色服务</dt>
                    <dd><a href="javascript:;" class="no-achieve">F 码通道</a></dd>
                    <dd><a href="javascript:;" class="no-achieve">礼物码</a></dd>
                    <dd><a href="javascript:;" class="no-achieve">防伪查询</a></dd>
                </dl>
                <div class="footer-contact">
                    <p class="phonenum">xxx-xxx-xxxx</p>
                    <p>8:00-18:00（仅收市话费）</p>
                    <a href="javascript:;" class="art-ser no-achieve"><span class="iconfont">&#xe710;</span>人工客服</a>
                    <div class="follow">
                        关注我们:
                        <a href="javascript:;" class="wb no-achieve"></a>
                        <a href="javascript:;" class="wx no-achieve"></a>
                        <img src="" alt="八八商城微信二维码">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--页脚结束-->
<!--侧边栏开始-->
<div class="tool-bar">
    <!--<div class="icon icon1">
        <a>
            <span class="iconfont">&#xe525;</span>
        </a>
        <span>手机APP</span>
        <div class="icon-code">
            <img src="" alt="八八商城手机app二维码">
            <span>扫码领取新人百元礼包</span>
        </div>
    </div>
    <div class="icon icon2">
        <a href="javascript:;" class="no-achieve">
            <span class="iconfont">&#xe65d;</span>
        </a>
        <span>个人中心</span>
    </div>
    <div class="icon icon3">
        <a href="javascript:;" class="no-achieve">
            <span class="iconfont">&#xe629;</span>
        </a>
        <span>售后服务</span>
    </div>
    <div class="icon icon4">
        <a href="javascript:;" class="no-achieve">
            <span class="iconfont">&#xe605;</span>
        </a>
        <span>人工客服</span>
    </div>
    <div class="icon icon5">
        <a href="javascript:;" class="no-achieve">
            <span class="iconfont">&#xe607;</span>
        </a>
        <span>购物车</span>
    </div>-->
    <div class="icon icon6 to-top">
        <a href="javascript:;">
            <span class="iconfont">&#xe623;</span>
        </a>
        <span>回顶部</span>
    </div>
</div>
<!--侧边栏结束-->


<script src="/static/js/consume/jquery-1.7.2.js"></script>
<script src="/static/js/consume/carousel.js"></script>
<script src="/static/js/consume/index.js"></script>
<script>
    //点击返回顶部
    $(".to-top").on("click",function (){
        window.scrollTo(0,0);
    })
</script>
</body>
</html>